<!--
 * @Description: 工单详情
 * @Author: charles
 * @Date: 2021-12-14 22:10:42
 * @LastEditors: Chips
 * @LastEditTime: 2022-01-06 09:22:15
-->
<template>
  <div>
    <div class="header">
      <el-page-header
        @back="$router.go(-1)"
        content="详情界面"
      ></el-page-header>
    </div>
    <br />
    <div class="orderDetail">
      <div class="orderInfo">
        <!-- {{ order }} -->
        <div class="order_header">工单信息</div>
        <br />
        <br />
        <div class="order_content">
          <el-form label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="工单编号">
                  {{ workOrder.id }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类型/状态">
                  {{ workOrder.type }}
                  <template>
                    <el-tag
                      size="mini"
                      v-if="workOrder.status == '进行中'"
                      type="success"
                      >进行中</el-tag
                    >
                    <el-tag
                      size="mini"
                      v-else-if="workOrder.status == '待接单'"
                      type="info"
                      >待接单</el-tag
                    >
                    <el-tag size="mini" v-else type="danger">已完成</el-tag>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="问题设备">
                  {{ workOrder.device_name }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报修问题">
                  {{ workOrder.bill_why }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="创建时间">
                  {{ workOrder.create_time | fmtTime }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="完成时间">
                  {{ workOrder.finish_time | fmtTime }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="工程名称">
                  {{ workOrder.engineer_name }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工人编号">
                  {{ workOrder.account_name }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开始照片">
                  <div
                    class="notice"
                    v-show="workOrder.begin_photos.length == 0"
                  >
                    无图片
                  </div>
                  <div v-show="workOrder.begin_photos.length > 0">
                    <!-- {{ workOrder.begin_photos[0] }} -->
                    <img :src="workOrder.begin_photos[0]" class="image" />
                    <img :src="workOrder.begin_photos[1]" class="image" />
                    <img :src="workOrder.begin_photos[2]" class="image" /></div
                ></el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束照片">
                  <div class="notice" v-show="workOrder.end_photos.length == 0">
                    无图片
                  </div>
                  <div v-show="workOrder.end_photos.length > 0">
                    <img :src="workOrder.end_photos[0]" class="image" />
                    <img :src="workOrder.end_photos[1]" class="image" />
                    <img :src="workOrder.end_photos[2]" class="image" />
                    <!-- {{ workOrder.end_photos }} -->
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <br />
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      workOrder: {},
    };
  },
  methods: {},
  created() {
    this.workOrder = this.$route.query;
  },
};
</script>
<style scoped>
.header {
  font-family: 微软雅黑;
}
.orderDetail {
  margin-top: 100px;
  margin: 0 auto;
  width: 98%;
  box-shadow: 20px 20px 20px 20px #c3c2c2;
  border-radius: 12px;
}

.orderInfo {
  padding: 1em;
}
.order_header {
  height: 42px;
  line-height: 42px;
  background: #ededed;
  color: rgb(100, 99, 99);
  font-size: 20px;
  font-family: 微软雅黑;
  font-weight: 700;
  border-radius: 3px;
  padding-left: 1em;
}
.image {
  margin-left: 10px;
  width: 190px;
  height: 190px;
}
.notice {
  height: 200px;
  line-height: 200px;
  font-size: 30px;
  color: red;
  font-family: 微软雅黑;
  font-weight: 600;
}
</style>